<template>
  <div class="ele-body">
    <a-card :bordered="false" title="添加货品">
      <a-form
        :label-col="{ md: { span: 9 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 15 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="条形码" v-bind="validateInfos.bar_code">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.bar_code"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="货品种类" v-bind="validateInfos.subclass_code">
              <a-select
                placeholder="请选择"
                :options="goods_category_options"
                v-model:value="form.subclass_code"
                @change="goods_category_change"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="货品名称">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.name"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="货品成色" v-bind="validateInfos.quality">
              <a-select
                placeholder="请选择"
                :options="quality_options"
                v-model:value="form.quality"
                @change="quality_change"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="货品款式" v-bind="validateInfos.style_code">
              <a-select
                placeholder="请选择"
                :options="style_options"
                v-model:value="form.style_code"
                @change="style_change"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="二手款式">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.sub_style"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="净金重(g)" v-bind="validateInfos.gold_weight">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.gold_weight"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="总件重(g)" v-bind="validateInfos.piece_weight">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.piece_weight"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="内部款号">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.style_model"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="手寸">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.hand_inch"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="长度(cm)">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.length"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="内径(mm)">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.inner_diameter"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="尺寸(mm)">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.size"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="主石零售价" v-bind="validateInfos.main_stone_retail_price">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.main_stone_retail_price"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="标签价" v-bind="validateInfos.sticker_price">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.sticker_price"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="工费零售方式" v-bind="validateInfos.retail_labour_type">
              <a-select
                placeholder="请选择"
                :options="retail_labour_options"
                v-model:value="form.retail_labour_type"
                @change="retail_labour_change"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="零售方式" v-bind="validateInfos.retail_type">
              <a-select
                placeholder="请选择"
                :options="retail_labour_options"
                v-model:value="form.retail_type"
                @change="retail_labour_change2"
              />
            </a-form-item>
          </a-col>
		  <a-col :md="6" :sm="12" :xs="12">
		    <a-form-item label="零售工费">
		      <a-input
		        allow-clear
		        placeholder="请输入"
		        autocomplete="off"
		        v-model:value="form.retail_labour_expenses"
		      />
		    </a-form-item>
		  </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="采购金价">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.purchase_gold_price"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12" :xs="12">
            <a-form-item label="采购工费">
              <a-input
                allow-clear
                placeholder="请输入"
                autocomplete="off"
                v-model:value="form.purchase_labour_expenses"
              />
            </a-form-item>
          </a-col>
          <template v-if="searchExpand">
			  <a-col :md="6" :sm="12" :xs="12">
				<a-form-item label="采购总额">
				  <a-input
					allow-clear
					placeholder="请输入"
					autocomplete="off"
					disabled
					v-model:value="form.purchase_labour_amount"
				  />
				</a-form-item>
			  </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="金料金价">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.gold_material_price"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="损耗（0-1)">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.loss"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="基础工费">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.basic_labour"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="特殊工费">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.special_labour"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="其他费用">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.other_fee"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="证书费">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.cert_fee"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="品牌附加费">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.brand_extra_fee"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="成本">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
				  disabled
                  v-model:value="form.cost"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="分销成本">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.retail_cost"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="数量" v-bind="validateInfos.num">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
				  disabled
                  v-model:value="form.num"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="证书1类型">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.cert_first_cate"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="证书1编码">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.cert_first_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="证书2类型">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.cert_second_cate"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="证书2编码">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.cert_second_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="经营品牌">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.management_brand"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="品牌">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.brand"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="贵金属颜色">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.color"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="供应商名称" v-bind="validateInfos.supplier_code">
                <a-select
                  placeholder="请选择"
                  :options="supplier_options"
                  v-model:value="form.supplier_code"
                  @change="supplier_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="供应商条码">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.supplier_bar"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="供应商款号">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.supplier_style_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="系列名称" v-bind="validateInfos.series_code">
                <a-select
                  placeholder="请选择"
                  :options="series_options"
                  v-model:value="form.series_code"
                  @change="series_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="系列款式" v-bind="validateInfos.series_style_code">
                <a-select
                  placeholder="请选择"
                  :options="series_style_options"
                  v-model:value="form.series_style_code"
                  @change="series_style_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="监管码">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.supervision_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="旧条码号">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.old_bar_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="财务分类">
                <a-select
                  placeholder="请选择"
                  :options="finance_options"
                  v-model:value="form.finance"
                  @change="finance_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="赠品类型">
                <a-select
                  placeholder="请选择"
                  :options="present_cate_options"
                  v-model:value="form.present_cate"
                  @change="present_cate_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="工艺类型">
                <a-select
                  placeholder="请选择"
                  :options="craft_cate_options"
                  v-model:value="form.craft_cate"
                  @change="craft_cate_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="价格类型">
                <a-select
                  placeholder="请选择"
                  :options="price_cate_options"
                  v-model:value="form.price_cate"
                  @change="price_cate_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="宝石类别">
                <a-select
                  placeholder="请选择"
                  :options="gem_category_options"
                  v-model:value="form.gem_category_code"
                  @change="gem_category_change"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="备注1">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.note_first"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="备注2">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="form.note_second"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12" :xs="12">
              <a-form-item label="上传图片">
                <a-upload
                  name="attachment"
                  v-model:file-list="images"
                  :action="uploadUrl"
                  :limit="1"
                  list-type="picture-card"
                  @change="uploadHandler"
                  :show-upload-list="false"
                >
                  <img
                    v-if="imageUrl"
                    :src="imageUrl"
                    style="width: 100%"
                    alt="example"
                  />
                  <div v-else>
                    <loading-outlined v-if="loading" />
                    <plus-outlined v-else />
                    <div class="ant-upload-text">上传图片</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="12" :xs="12" :offset="18">
            <a-form-item label="" class="text-right">
              <a @click="toggleExpand">
                <span v-if="searchExpand">
                  收起 <up-outlined class="ele-text-small" />
                </span>
                <span v-else>
                  更多信息 <down-outlined class="ele-text-small" />
                </span>
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div>
        <div class="fs-16 fw-bolder margin-bottom-15">主石信息</div>
        <div>
          <vxe-table
            border
            show-overflow
            :column-config="{ resizable: true }"
            :loading="table1.loading"
            :data="table1.tableData"
            :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
          >
            >
            <vxe-column type="seq" title="NO" width="60" fixed="left" />
            <vxe-column
              field="name"
              title="石料名称"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.name"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="gem_category_name"
              title="宝石类别"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{
                  productSpec(gem_category_options, row.gem_category_name)
                }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.gem_category_name"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in gem_category_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="price"
              title="单价"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.price"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column field="num" title="数量" width="150" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.num"
                  type="number"
                  placeholder="请输入"
                  disabled
                />
              </template>
            </vxe-column>
			<vxe-column
			  field="amount"
			  title="总价"
			  width="150"
			  :edit-render="{}"
			>
			  <template #edit="{ row }">
			    <vxe-input
			      v-model="row.amount"
			      type="text"
			      placeholder="请输入"
			    />
			  </template>
			</vxe-column>
            <vxe-column
              field="weight"
              title="重量"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.weight"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="stone_code"
              title="石号"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(stone_options, row.stone_code) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.stone_code"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in stone_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="form" title="形状" width="150" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ productSpec(form_options, row.form) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.form" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in form_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="color"
              title="颜色"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(color_options, row.color) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.color" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in color_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="neatness"
              title="净度"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(neatness_options, row.neatness) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.neatness"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in neatness_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="cut" title="切工" width="150" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ productSpec(cut_options, row.cut) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.cut" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in cut_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="buffing"
              title="抛光"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(buffing_options, row.buffing) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.buffing" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in buffing_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="symmetric"
              title="对称"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(symmetric_options, row.symmetric) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.symmetric"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in symmetric_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="fluorescence"
              title="荧光"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{
                  productSpec(fluorescence_options, row.fluorescence)
                }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.fluorescence"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in fluorescence_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="fluorescence_color"
              title="荧光颜色"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fluorescence_color"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="inlay_fee"
              title="镶嵌工费"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.inlay_fee"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_fee"
              title="证书费"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_fee"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_cate"
              title="证书类型"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_cate"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_code"
              title="证书编号"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_code"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div>
        <div class="fs-16 fw-bolder margin-y-15">副石信息</div>
        <div>
          <vxe-table
            border
            show-overflow
            ref="xTable"
            :column-config="{ resizable: true }"
            :loading="table2.loading"
            :data="table2.tableData"
            :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
          >
            >
            <vxe-column type="seq" title="NO" width="60" fixed="left" />
            <vxe-column
              field="name"
              title="石料名称"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.name"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="gem_category_name"
              title="宝石类别"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{
                  productSpec(gem_category_options, row.gem_category_name)
                }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.gem_category_name"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in gem_category_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="price"
              title="单价"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.price"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column field="num" title="数量" width="150" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.num"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
			<vxe-column
			  field="amount"
			  title="总价"
			  width="150"
			  :edit-render="{}"
			>
			  <template #edit="{ row }">
			    <vxe-input
			      v-model="row.amount"
			      type="text"
			      placeholder="请输入"
			    />
			  </template>
			</vxe-column>
            <vxe-column
              field="weight"
              title="重量"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.weight"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="stone_code"
              title="石号"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(stone_options, row.stone_code) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.stone_code"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in stone_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="form" title="形状" width="150" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ productSpec(form_options, row.form) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.form" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in form_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="color"
              title="颜色"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(color_options, row.color) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.color" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in color_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="neatness"
              title="净度"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(neatness_options, row.neatness) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.neatness"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in neatness_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="cut" title="切工" width="150" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ productSpec(cut_options, row.cut) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.cut" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in cut_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="buffing"
              title="抛光"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(buffing_options, row.buffing) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.buffing" placeholder="请选择" transfer>
                  <vxe-option
                    v-for="item in buffing_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="symmetric"
              title="对称"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{ productSpec(symmetric_options, row.symmetric) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.symmetric"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in symmetric_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="fluorescence"
              title="荧光"
              width="150"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span>{{
                  productSpec(fluorescence_options, row.fluorescence)
                }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select
                  v-model="row.fluorescence"
                  placeholder="请选择"
                  transfer
                >
                  <vxe-option
                    v-for="item in fluorescence_options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column
              field="fluorescence_color"
              title="荧光颜色"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fluorescence_color"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="inlay_fee"
              title="镶嵌工费"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.inlay_fee"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_fee"
              title="证书费"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_fee"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_cate"
              title="证书类型"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_cate"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="cert_code"
              title="证书编号"
              width="150"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.cert_code"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-toolbar>
            <template #buttons>
              <vxe-button @click="insertEvent(-1)">新增</vxe-button>
             <!-- <vxe-button @click="getInsertEvent">获取新增</vxe-button> -->
            </template>
          </vxe-toolbar>
        </div>
      </div>
      <div>
        <div class="fs-16 fw-bolder margin-y-15">配件信息</div>
        <div>
          <vxe-table
            border
            show-overflow
            :column-config="{ resizable: true }"
            :loading="table3.loading"
            :data="table3.tableData"
            :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
          >
            <vxe-column field="fitting_name" title="配件名称" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fitting_name"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column field="fitting_num" title="配件数量" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fitting_num"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="fitting_weight"
              title="配件重量"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fitting_weight"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="name"
              title="配件数单价（元/件）"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.name"
                  type="number"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="fitting_weight_price"
              title="配件重单价（元/克）"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fitting_weight_price"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
            <vxe-column
              field="fitting_cost"
              title="配件成本价（元）"
              :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                  v-model="row.fitting_cost"
                  type="text"
                  placeholder="请输入"
                />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-card>
    <div style="width: 100%; height: 100px"></div>
    <!-- 底部工具栏 -->
    <div class="ele-bottom-tool">
      <div class="ele-bottom-tool-actions">
        <a-space size="large">
          <a-button type="primary" :loading="loading" @click="save()">
            保存
          </a-button>
          <a-button type="default" class="btn" :loading="loading">
            取消
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted, defineComponent } from 'vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { message, Modal, Form } from 'ant-design-vue';
  //import { VXETable, VxeTableInstance } from 'vxe-table';
  import { uploadUrl } from '@/config/setting';
  import {
    get_goods_category_list,
    get_quality_list,
    get_style_list,
    get_supplier_list,
    get_series_list,
    get_series_style_list,
    get_gift_list,
    get_technology_list,
    get_price_category_list,
    get_gem_category_list,
    get_finance_list,
    get_gem_attribute_list,
	add_goods
  } from '@/api/jewelry/receipts_purchase';
import { forIn } from 'lodash-es';

  const useForm = Form.useForm;
  const loading = ref(false);
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log('query:', query);

  // 是否展开
  const searchExpand = ref(false);
  //工费零售方式
  const retail_labour_options = ref([
    { label: '计件', value: '1' },
    { label: '计克', value: '2' }
  ]);
	//主石信息
  const table1 = reactive({
    loading: false,
    tableData: [
      {
        type: 1,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    tableData: [
      {
        type: 2,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });
  //配件信息
  const table3 = reactive({
    loading: false,
    tableData: [
      {
        note_second: '',
        fitting_name: '',
        fitting_num: '',
        fitting_weight: '',
        fitting_num_price: '',
        fitting_weight_price: '',
        fitting_cost: ''
      }
    ]
  });

  const form = reactive({
    code: '',
	bar_code: '',
	subclass_code: '',
	name: '',
	quality: '',
	style_code: '',
	sub_style: '',
	gold_weight: '',
	piece_weight: '',
	style_model: '',
	hand_inch: '',
	length: '',
	inner_diameter: '',
	size: '',
	main_stone_retail_price: '',
	sticker_price: '',
	retail_labour_expenses:'',
	retail_labour_type: '',
	retail_type: '',
	purchase_gold_price: '',
	purchase_labour_expenses: '',
	purchase_labour_amount: '',
	gold_material_price: '',
	loss: '',
	basic_labour: '',
	special_labour: '',
	other_fee: '',
	cert_fee: '',
	brand_extra_fee: '',
	cost: '',
	retail_cost: '',
	num: 1,
	cert_first_cate: '',
	cert_first_code: '',
	cert_second_cate: '',
	cert_second_code: '',
	management_brand: '',
	brand: '',
	color: '',
	supplier_code: '',
	supplier_bar: '',
	supplier_style_code: '',
	series_code: '',
	series_style_code: '',
	supervision_code: '',
	old_bar_code: '',
	finance: '',
	present_cate: '',
	craft_cate: '',
	price_cate: '',
	gem_category_code: '',
	note_first: '',
	note_second: '',
	thumb: '',
	fitting_name: '',
	fitting_num: '',
	fitting_weight: '',
	fitting_num_price: '',
	fitting_weight_price: '',
	fitting_cost: '',
	gem_item: []
    /* goods_info: {
      
    }, */
    /* master_gem: {
      name: '',
      gem_category_name: '',
      price: '',
      num: '',
      amount: '',
      weight: '',
      stone_code: '',
      form: '',
      specs: '',
      color: '',
      neatness: '',
      cut: '',
      buffing: '',
      symmetric: '',
      fluorescence: '',
      fluorescence_color: '',
      inlay_fee: '',
      cert_fee: '',
      cert_cate: '',
      cert_code: ''
    },
    slave_gem: [
      {
        name: '',
        gem_category_name: '',
        price: '',
        num: '',
        amount: '',
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        inlay_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ] */
  });

  const imageUrl = ref('');
  // 头像上传
  const images = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      imageUrl.value = data.path;
      form.thumb = data.id;
    }
  };
  const goods_category_options = ref([]);
  const quality_options = ref([]);
  const style_options = ref([]);
  const supplier_options = ref([]);
  const series_options = ref([]);
  const series_style_options = ref([]);
  const present_cate_options = ref([]);
  const craft_cate_options = ref([]);
  const price_cate_options = ref([]);
  const gem_category_options = ref([]);
  const finance_options = ref([]);

  onMounted(() => {
	  form.code = query.code;
    get_goods_category_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        goods_category_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_quality_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        quality_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_style_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        style_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_supplier_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        supplier_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_series_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        series_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_series_style_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        series_style_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_gift_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        present_cate_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_technology_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        craft_cate_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_price_category_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        price_cate_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_gem_category_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        gem_category_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    get_finance_list({ page: 1, limit: 9999 }).then((res) => {
      res.list.map((item) => {
        finance_options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
    getStone('stone');
    getStone('form');
    getStone('color');
    getStone('cut');
    getStone('neatness');
    getStone('symmetric');
    getStone('buffing');
    getStone('fluorescence');
  });
  const stone_options = ref([]);
  const form_options = ref([]);
  const color_options = ref([]);
  const neatness_options = ref([]);
  const cut_options = ref([]);
  const buffing_options = ref([]);
  const symmetric_options = ref([]);
  const fluorescence_options = ref([]);
  //stone石号,form形状,color颜色,neatness净度,cut切工,symmetric对称,buffing抛光,fluorescence荧光
  const getStone = (type) => {
    get_gem_attribute_list({ page: 1, limit: 9999, type: type }).then((res) => {
      res.list.map((item) => {
        if (type == 'stone') {
          stone_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'form') {
          form_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'color') {
          color_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'neatness') {
          neatness_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'cut') {
          cut_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'buffing') {
          buffing_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'symmetric') {
          symmetric_options.value.push({
            value: item.code,
            label: item.name
          });
        } else if (type == 'fluorescence') {
          fluorescence_options.value.push({
            value: item.code,
            label: item.name
          });
        }
      });
    });
  };
  const xTable = ref(null);
  const insertEvent = async (row) => {
    const $table = xTable.value;
    const record = {
      type: 2,
      num: 1
    };
    const { row: newRow } = await $table.insertAt(record, row);
    await $table.setEditCell(newRow, 'name');
  };
  const getInsertEvent = () => {
    const $table = xTable.value;
    const insertRecords = $table.getInsertRecords();
    console.log('获取新增', insertRecords);
    table2.tableData = table2.tableData.concat(
      JSON.parse(JSON.stringify(insertRecords))
    );
  };

  //根据value寻找label， 用于回显
  const productSpec = (list, code) => {
    //console.log('）））', list, code);
    if (list.length > 0) {
      const item = list.find((item) => item.value === code);
      return item ? item.label : code;
    }
  };

  /* 货品种类 */
  const goods_category_change = (e) => {
    console.log('货品种类:', e);
    form.subclass_code = e;
  };
  /* 货品成色*/
  const quality_change = (e) => {
    console.log('货品成色:', e);
    form.quality_code = e;
  };
  /* 货品款式*/
  const style_change = (e) => {
    console.log('货品款式:', e);
    form.style_code = e;
  };
  /* 工费零售方式*/
  const retail_labour_change = (e) => {
    console.log('工费零售方式:', e);
    form.retail_labour_type = e;
  };
  /* 零售方式*/
  const retail_labour_change2 = (e) => {
    console.log('零售方式:', e);
    form.retail_type = e;
  };
  /* 供应商名称*/
  const supplier_change = (e) => {
    console.log('供应商名称:', e);
    form.supplier_code = e;
  };
  /* 系列名称*/
  const series_change = (e) => {
    console.log('系列名称:', e);
    form.series_code = e;
  };
  /* 系列款式*/
  const series_style_change = (e) => {
    console.log('系列款式:', e);
    form.series_style_code = e;
  };
  /* 赠品类型*/
  const present_cate_change = (e) => {
    console.log('赠品类型:', e);
    form.present_cate = e;
  };
  /* 工艺类型*/
  const craft_cate_change = (e) => {
    console.log('工艺类型:', e);
    form.craft_cate = e;
  };
  /* 价格类型*/
  const price_cate_change = (e) => {
    console.log('价格类型:', e);
    form.price_cate = e;
  };
  /* 宝石类别*/
  const gem_category_change = (e) => {
    console.log('宝石类别:', e);
    form.gem_category_code = e;
  };
  /* 财务分类*/
  const finance_change = (e) => {
    console.log('财务分类:', e);
    form.finance = e;
  };

  const toggleExpand = () => {
    searchExpand.value = !searchExpand.value;
  };

  // 表单验证规则
  const rules = reactive({
    bar_code: [{required: true,message: '请输入条形码',trigger: 'blur'}],
    subclass_code: [{required: true,message: '请选择货品种类',trigger: 'change'}],
    quality: [{required: true,message: '请选择货品成色',trigger: 'change'}],
    style_code: [{required: true,message: '请选择货品款式',trigger: 'change'}],
    gold_weight: [{required: true,message: '请输入净金重',trigger: 'blur'}],
    piece_weight: [{required: true,message: '请输入总件重',trigger: 'blur'}],
    main_stone_retail_price: [{required: true,message: '请输入主石零售价',trigger: 'blur'}],
    sticker_price: [{required: true,message: '请输入标签价',trigger: 'blur'}],
    retail_labour_type: [{required: true,message: '请选择工费零售方式',trigger: 'change'}],
    retail_type: [{required: true,message: '请选择零售方式',trigger: 'change'}],
    num: [{required: true,message: '请输入数量',trigger: 'blur'}],
    supplier_code: [{required: true,message: '请选择供应商',trigger: 'change'}],
    series_code: [{required: true,message: '请选择系列',trigger: 'change'}],
    series_style_code: [{required: true,message: '请选择系列款式',trigger: 'change'}]
  });

  const { validate, validateInfos } = useForm(form, rules);

  const save = () => {
    validate()
      .then(async () => {
		  await getInsertEvent();
		  	for(let key in table3.tableData[0]){
		  		form[key] = (table3.tableData[0])[key]
		  	}
		   form.gem_item[0] = table1.tableData[0];
		   form.gem_item = form.gem_item.concat(table2.tableData);
		   console.log('form', form);
        add_goods(form).then((res) => {
          message.success(res.msg);
          }).catch(e=>{
          	message.error(e);
          })
      })
      .catch((e) => {
		  console.log(222, e)
	  });
  };
</script>
